<template>
    <el-card shadow="hover" style="width: 250px;height: 380px;border-radius: 15px;" @click="goCommodity">
        <el-row align="middle" justify="center">
            <el-col :span="24">
                <el-image :src="url" style="width: 100%;height: 200px;" fit="contain" />
            </el-col>
            <el-col :span="24" align="start">
                <el-text style="font-size: larger;" line-clamp="1">{{ commodity?.commodityName }}</el-text>
            </el-col>
            <el-col :span="24" align="start">
                <el-text style="color: gray;height: 60px;" line-clamp="3">{{ commodity?.description }}</el-text>
            </el-col>
            <el-col :span="24" align="end">
                <el-text style="color: red;font-size: large;" line-clamp="1">¥ {{ commodity?.price }}</el-text>
            </el-col>
            <el-col :span="24" style="margin-top: 5%;height: max-content;">
                <el-row style="width: 100%;">
                    <el-col :span="24" align="start">
                        <el-text>浏览量：{{ commodity?.browse }}</el-text>
                        <el-text style="margin-left: 10%;">评分：{{ commodity?.point }}</el-text>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { CommodityModel } from '../assets/model/Commodity';

const router = useRouter();
const url = ref<string>();
onMounted(() => {
    if (prop.commodity?.image) {
        url.value = `/api/image/${prop.commodity?.image.url}`
    }
})
const prop = defineProps({
    commodity: {
        type: CommodityModel
    }
});


const goCommodity = () => {
    router.push({
        path: '/commodity',
        query: {
            gid: prop.commodity?.gid
        }
    })
}
</script>